<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>Test dojox.form.UploaderHTML5</title>
	<link href="../../../dijit/themes/dijit.css" rel="stylesheet" />
	<link href="../../../dijit/themes/claro/Common.css" rel="stylesheet" />
	<link href="../../../dijit/themes/claro/form/Common.css" rel="stylesheet" />
	<link href="../../../dijit/themes/claro/Dialog.css" rel="stylesheet" />
	<link href="../../../dijit/themes/claro/form/Button.css" rel="stylesheet" />
	<link href="../../../dijit/themes/claro/layout/TabContainer.css" rel="stylesheet" />
	<link href="../../../dijit/themes/claro/Dialog.css" rel="stylesheet" />

	<link href="../resources/UploaderFileList.css" rel="stylesheet" />
	<style>
		@import "../../../dijit/tests/css/dijitTests.css";
		html, body{
			font-family:sans-serif;
		}
		.browseButton{
			width:300px;
			height:20px;
			font-weight:bold;
			margin:10px 0 2px 0;
		}
		.dijitTabPane{
			padding:20px;
		}
		form{
			width:315px;
			margin-right:10px;
		}
		fieldset{
			text-align:right;
		}
		input[type=text]{
			width:140px;
		}
		.dijitButton{
			margin-top:15px;
		}
		.dojoxUploaderFileList{
			text-align:left;
			margin-top:10px;
		}
		.pageTable{
			width:100%;
		}
		.pageTable td{
			vertical-align:top;
		}
		#colForm{
			width:330px;
		}
		#colImages{
			padding-top:7px;
		}
		.thumb{
			border:1px solid #ccc;
			padding:5px;
			width:123px;
			background:#eee;
			float:left;
			margin:0 5px 5px 0;
		}
		.thumbbk{
			background:#fff;
			display:block;
		}
		.thumb img{
			border:1px solid #ccc;
			width:120px;
		}
		.form, .html5, .iframe, .flash{
			display:none;
		}
		.Form .form, .HTML5 .html5, .IFrame .iframe, .Flash .flash{
			display:block;
		}
		#dialog p{
			width:310px;
		}
		.claro .attachButton{
			width:350px;
			height:60px;
			border:0;
		}
		.claro .attachButton .dijitButton .dijitButtonNode{
			background-color:#ffffff;
			background-image:url(images/attach.png);
			background-position:left top;
			background-repeat:no-repeat;
			height:56px;
			border:0;
			-moz-box-shadow:0 0 0;
			-webkit-box-shadow:0 0 0;
		}
		.claro .attachButton .dijitButtonHover .dijitButtonNode{
			background-position:0px -60px;
		}
		code{
			font-family:monospace;
			white-space:nowrap;
		}
	</style>
	<script>
		djConfig = {
			parseOnLoad:true,
			isDebug:true
		}
	</script>
	<script src="../../../dojo/dojo.js"></script>
	<script>
		dojo.require("dojox.form.Uploader");
		dojo.require("dojox.form.uploader.FileList");
		dojo.require("dijit.form.Button");

		// Dynamically determining which plugin to use, based off of the location search.
		var plug = "Form"; // Default
		switch(document.location.search){
			case "?html5":
				dojo.require("dojox.form.uploader.plugins.HTML5");
				plug = "HTML5";
				break;
			case "?iframe":
				dojo.require("dojox.form.uploader.plugins.IFrame");
				plug = "IFrame";
				break;
			case "?flash":
				dojo.require("dojox.form.uploader.plugins.Flash");
				plug = "Flash";
				break;
		}

		var title = "Test dojox.form.Uploader + " + plug;
		document.title = title;
		var handleUpload = function(upl, node){
			if(plug == "Form"){
				dojo.connect(upl, "onChange", function(){
					node.appendChild(dojo.create('div', {innerHTML:"This Uploader does not work in Form mode."}));
					//alert("This Uploader does not work in Form mode.")
				});
			}
			dojo.connect(upl, "onComplete", function(dataArray){
				dojo.forEach(dataArray, function(file){
					console.log("display:", file)

					var div = dojo.create('div', {className:'thumb'});
					var span = dojo.create('span', {className:'thumbbk'}, div);
					var img = dojo.create('img', {src:file.file}, span);
					node.appendChild(div);
				});
			});
		}
		dojo.addOnLoad(function(){
			dojo.addClass(dojo.body(), plug);
			dojo.query('h1')[0].innerHTML = title;
			dojo.connect(dijit.byId("remBtn"), "onClick", dijit.byId("uploader"), "reset");
			handleUpload(dijit.byId("uploader"), dojo.byId('colImages'));
		});
	</script>
</head>
<body class="claro">
    <h1>Test dojox.form.Uploader Flash</h1>
	<p style="font-size:14px; border:2px solid #ff0000; padding:3px;">
		<strong>NOTE:</strong> This test does upload,
		but the server scripts are renamed to <code>tests/UploadFile.php.<strong>disabled</strong></code> and
		<code>tests/cLOG.php.<strong>disabled</strong></code> to prevent security attacks on hosted servers.
		You should rename these files (removing <code>.disabled</code>) in your local copy to conduct tests.
	</p>
	<p class="form">
		The Uploader with no plugins is in "Form" mode. This mode <strong>will not do an Ajax upload</strong>.
		Only form POSTs will work and they will navigate to the UploadFile.php page.
	</p>
	<p class="html5">
		The HTML5 Uploder plugin does not support IE. HTML5 is more of a base class for IFrame or
		Flash, or used in cases where IE is not a requirement. This test case is for development purposes.
	</p>
	<p class="iframe">
		The IFrame plugin will use the IFrame to upload in IE. All other browsers will use the HTML5 plugin
		unless force="iframe" is used.
		When using this plugin, be sure your form use the attribute: <code>enctype="multipart/form-data"</code>
	</p>
	<p class="flash">
		The Flash plugin will use a SWF to upload in non-HTML5 browsers. All other browsers will use the HTML5 plugin,
		unless <code>force="flash"</code> is used, then Flash will be used in all browsers. <code>force="flash"</code>
		is provided because Flash has some features that HTML5 does not yet have. But it is still not
		recommended because of the many problems that Firefox and Webkit have with the Flash plugin.
	</p>
	<p>
		<a href="test_UploaderAll.html">Form</a>
		<a href="test_UploaderAll.html?html5">HTML5</a>
		<a href="test_UploaderAll.html?iframe">IFrame</a>
		<a href="test_UploaderAll.html?flash">Flash</a>
	</p>
	<table class="pageTable">
		<tr>
			<td id="colForm">
				<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
					<fieldset>
						<legend>Form Post Test</legend>
						<input class="browseButton" name="uploadedfile" multiple="true" type="file" dojoType="dojox.form.Uploader" label="Select Some Files" id="uploader">
						<input type="text" name="album" value="Summer Vacation" />
						<input type="text" name="year" value="2011" />
						<input type="button" id="remBtn" label="Clear" dojoType="dijit.form.Button" />
						<input type="submit" label="Submit" dojoType="dijit.form.Button" />
						<div id="files" dojoType="dojox.form.uploader.FileList" uploaderId="uploader"></div>
					</fieldset>
				</form>
			</td>
			<td id="colImages">
			</td>
		</tr>
	</table>

</body>
</html>
